<template>
  <div>
    <div class="filter-container">
      <!--商品图片头部行表单 搜索 增加 -->
      <el-tag effect="dark" style="margin-bottom: 20px;font-size: 18px;">{{product_title}}</el-tag>
      <el-button type="primary" style="margin-left: 10px;" icon="el-icon-edit" @click="handleAdd">
        增加
      </el-button>
    </div>

    <!-- 数据列表 编辑 删除 -->
    <div class="list-container">     
      <el-table :data="dataList" border fit highlight-current-row>
        <el-table-column label="图片ID" prop="id" width="70" align="center"></el-table-column>
        <el-table-column label="小图片" align="center">
          <template slot-scope="scope">
            <el-image class="table-td-image" :src="fullUrl(scope.row.sm)"
              :preview-src-list="[`${fullUrl(scope.row.sm)}`]"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="中图片" align="center">
          <template slot-scope="scope">
            <el-image class="table-td-image" :src="fullUrl(scope.row.md)"
              :preview-src-list="[`${fullUrl(scope.row.md)}`]"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="大图片" align="center">
          <template slot-scope="scope">
            <el-image class="table-td-image" :src="fullUrl(scope.row.lg)"
              :preview-src-list="[`${fullUrl(scope.row.lg)}`]"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">编辑</el-button>
            <el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row.id)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 编辑弹出框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%" top="5vh">
      <el-row>
        <h3 effect="dark" style="margin-bottom: 20px;font-size: 18px;">{{product_title}}</h3>
      </el-row>
      <el-form ref="dataForm" :model="dataForm" label-width="80px">
        <el-row>
          <el-col>
            <el-form-item label="图片ID">
              <el-input v-model="dataForm.id" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="商品小图">
          <upload-single-image :value.sync="dataForm.sm"></upload-single-image>
        </el-form-item>

        <el-form-item label="商品中图">
          <upload-single-image :value.sync="dataForm.md"></upload-single-image>
        </el-form-item>

        <el-form-item label="商品大图">
          <upload-single-image :value.sync="dataForm.lg"></upload-single-image>
        </el-form-item>

      </el-form>
      <!-- 底部按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click=" handleSubmit">确定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import UploadSingleImage from '@/components/Upload/UploadSingleImage'
  import {
    getProductImageList,
    deleteProductImageById,
    updateProductImage,
  } from "@/api/product.js";

  export default {
    name: "productImage",
    components: {
      UploadSingleImage
    },
    data() {
      return {
        dataList: [], //列表数据
        product_id: 0,
        product_title: "",

        //编辑框
        dialogVisible: false,        
        dataForm: {
          id: 0
        },
      };
    },

    created() {
      // 获取路由传参，初始列表数据
      let {
        product_id,
        product_title
      } = this.$route.query;
      this.product_id = parseInt(product_id) || 0;
      this.product_title = product_title;
      this.loadDataList(); // 初始列表数据
    },

    computed: {
      //弹框标题
      dialogTitle() {
        return !this.dataForm.id ? '新增' : '编辑' ;
      },
    },

    methods: {
      // 获取列表数据
      loadDataList() {
        getProductImageList(this.product_id).then(result => {
          this.dataList = result.data;
          this.dataList.forEach(item => item.product_title = this.product_title);
        }).catch(error => {});
      },

      // 触发搜索按钮
      handleSearch() {
        this.loadDataList();
      },

      // 增加记录
      handleAdd() {
        //初始默认值
        let defaultForm = {};
        defaultForm.id = 0; //新增状态
        defaultForm.product_id = this.product_id;
        defaultForm.sm = "";
        defaultForm.md = "";
        defaultForm.lg = "";
        this.dataForm = Object.assign({}, defaultForm);        
        this.dialogVisible = true;
      },

      // 删除操作
      handleDelete(index, id) {
        // 二次确认删除
        this.$confirm('确定要删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          // 选择了确认，则删除后端数据库中的记录          
          deleteProductImageById(id).then(() => {
            this.dataList.splice(index, 1); //同步列表中的记录
            this.$message.success('删除成功');
          }).catch(() => {});
        }).catch(() => {});
      },

      // 编辑操作
      handleUpdate(row) {
        this.dataForm = Object.assign({}, row) // copy obj row;        
        this.dialogVisible = true;
      },

      // 保存编辑
      handleSubmit() {        
        //接下来要同时更新后端数据库表中的数据
        //注意：要确保this.dataForm的属性和后端接受的参数名一致
        updateProductImage(this.dataForm).then((result) => {
          console.log(result);
          this.$message.success(`保存成功`);
          this.dialogVisible = false;
          this.loadDataList(); //重新刷新列表数据
        }).catch((error) => {
          console.log(error)
        });
      },

      //加上BaseAPI生成图片完整Url
      fullUrl(img) {
        return `${this.BaseAPI}${img}`;
      }
    },
  };
</script>

<style scoped>  
</style>
